@import '~antd/lib/style/themes/default.less';

@background-color-content: rgb(246, 245, 246);

// 内容区域有内容区域样式时样式
.content {
  background-color: @background-color-content;
  height: 100%;
  border: 1px dashed @border-color-base;
  padding: @padding-md;
  overflow: auto;
  width: 100%;
}

// 内容区域内没有内容时样式
.no_content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70%;
  font-size: @font-size-lg + 3;
  color: @text-color-secondary;
}

// 组件选中时的样式
.selected_item {
  position: relative; // 先相对定位再绝对定位能解决--相对定位后不脱离文件流带来的空白

  :global {
    .ant-form-item {
      border: 2px solid @primary-color !important;
      box-shadow: @box-shadow-base !important;
    }
  }
}

// 组件未选中的样式
.not_selected_item {
  position: relative;

  :global {
    .ant-form-item {
      border: 2px solid @background-color-content !important;
    }
  }
}

// 组件内工具栏
.toolbar {
  position: absolute;
  top: 0;
  left: calc(100% - 80px);
  background-color: @primary-color;
  width: 80px;
  height: @form-item-margin-bottom;
  z-index: 20;
  border-radius: @border-radius-base !important;
}

// 未选中icon样式
.not_selected_icon_list {
  display: none;
}

// 选中时icon列表样式
.selected_icon_list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  color: aliceblue;

  .delete_icon {
    cursor: pointer;
    padding: @padding-xs;
  }

  .move_icon {
    cursor: move;
    padding: @padding-xs;
  }
}
